<template>

  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="提交审核"/>
    </el-steps>


    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
      </el-form-item>

      <!-- 所属分类 TODO -->
      <el-form-item label="课程分类">
        <el-select v-model="courseInfo.subjectParentId" @change="getChildrenSubject" placeholder="请选择">
          <el-option
            v-for="item in parentSubjectList"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="courseInfo.subjectId" placeholder="请选择">
          <el-option
            v-for="item in childrenSubject"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 课程讲师 TODO -->

      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
      </el-form-item>

      <!-- 课程简介 TODO -->
      <el-form-item label="课程简介">
        <el-input type="textarea" v-model="courseInfo.description"></el-input>
      </el-form-item>

      <!-- 课程封面 TODO -->
      <el-form-item label="课程封面">
        <el-upload
          :action="BASE_API+'eduoss/fileoss'"
          list-type="picture-card"
          :auto-upload="true"
          :limit=1
          :multiple="false"
          :on-success="success"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="courseInfo.cover" alt=""
            >
            <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/>
        元
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import teacher from '../../../api/edu/teacher'
import subject from '../../../api/edu/subject'
import course from '../../../api/edu/course'

export default {
  data() {
    return {
      saveBtnDisabled: false, // 保存按钮是否禁用
      courseInfo: {
        title: '',
        subjectId: '',
        subjectParentId:'',
        teacherId: '',
        lessonNum: 0,
        description: '',
        cover: '',
        price: 0,
        fileList: ''
      },
      options: {},
      parentSubjectList: {},
      childrenSubject: {},
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      BASE_API: process.env.BASE_API //获取dev.env.js里面地址
    }
  },

  created() {
    this.getTeacher()
    this.getParentSubject(0)
  },

  methods: {

    next() {
      course.addCourseInformation(this.courseInfo)
        .then(response => {
          // 提示信息
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          const courseId = response.data.courseId
          this.$router.push({ path: '/edu/course/chapter/' + courseId })
        }).error(error => {
        this.$message({
          type: 'success',
          message: '添加失败'
        })
      })

    },
    //获取讲师分类
    getTeacher() {
      teacher.getTeacherList().then(response => {
        this.options = response.data.items
      })
    },
    //获取父级分类
    getParentSubject(parentId) {
      subject.getSubject(parentId).then(response => {
        this.parentSubjectList = response.data.list
      })
    },
    //获取子分类
    getChildrenSubject(parentId) {
      this.courseInfo.subjectId = ''
      subject.getSubject(parentId).then(response => {
        this.childrenSubject = response.data.list
      })
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    success(response, file, fileList) {
      this.disabled = true
      this.courseInfo.cover = response.data.url
    }
  }
}
</script>
